window.onload = function() {
    // tab栏切换
    var tab1 = $('.left .item:eq(0)'),
        tab2 = $('.left .item:eq(1)'),
        right1 = $('.right1'),
        mark = $('#mark'),
        addBtn = $('#addBtn'),
        right2 = $('.right2');
    var listBox = $('#listBox');
    tab1.click(function (e) {
        right2.hide();
        right1.show();
        
    });
    addBtn.click(function(){
        var addVal = $('#addVal');
        if (!addVal.val()){
            alert('请输入属性值');
            return false;
        }
        mark.hide();
        var nameVal = '测试',
            nextVal = '1',
            phoneVal = '18999998888',
            emailVal = '123456@qq.com',
            addressVal = '测试地址',
            statusVal = '1',
            genderVal = '男';
        var person = {
            nameVal: nameVal,
            nextVal: nextVal,
            phoneVal: phoneVal,
            emailVal: emailVal,
            addressVal: addressVal,
            genderVal: genderVal,
            statusVal: statusVal,
            data: new Date().toLocaleString(),
            dat: addVal.val()
        }
        console.log(person);
        person = JSON.stringify(person);
        console.log(person);
        var arrStr = '';
        var oldStr = localStorage.getItem('personArrStr') || '';
        oldStr = person + '&' + oldStr;
        localStorage.setItem('personArrStr', oldStr);
        alert('会员添加成功');
    });
    tab2.click(function (e) {
        right1.hide();
        right2.show();
        var perArr = localStorage.getItem('personArrStr').split("&");
        perArr = perArr.slice(0, perArr.length -1);
        console.log(perArr);
        
        var htmlStr = '';
        if (!perArr.length){
            htmlStr = '暂无数据'
        }else{
            for (var i = 0; i < perArr.length; i++){
                var item = JSON.parse(perArr[i]);
                htmlStr += '<div class="list "><div class="li id">' + (perArr.length-i) 
                        +'</div><div class="li name">' + item.nameVal
                        + '</div><div class="li next">' + item.nextVal
                        + '</div><div class="li gender">' + item.genderVal
                        + '</div><div class="li phone">' + item.phoneVal
                        + '</div><div class="li email">' + item.emailVal
                        + '</div><div class="li address">' + item.addressVal
                        + '</div><div class="li time">' + item.data
                        + '</div><div class="li status">' + item.statusVal
                    + '</div><div class="li status change" data-value=' + item.dat +' data-item=' + JSON.stringify(item) + ' data-index=' + i +'>' + item.dat
                        + '</div></div>';
            }
        }
        listBox.html(htmlStr);
    });
    var index = '';
    var _val = '';
    listBox.click(function(e) {
        if (!$(e.target).data('value')){
            return false;
        }
        $('#mark2').show();
        $('#addVal2').val($(e.target).data('value'));
        index = $(e.target).data('index');
        _val = $(e.target).data('value');
    })
    $('#addBtn2').click(function(){
        var perArr = localStorage.getItem('personArrStr').split("&");
        perArr = perArr.slice(0, perArr.length - 1);
        console.log(perArr);
        var htmlStr = '';
        if (!perArr.length) {
            htmlStr = '暂无数据'
        } else {
            for (var i = 0; i < perArr.length; i++) {
                var item = JSON.parse(perArr[i]);
                console.log(item);
                console.log(index);
                var dataVal = index == i ? $('#addVal2').val() : item.dat;
                htmlStr += '<div class="list "><div class="li id">' + (perArr.length - i)
                    + '</div><div class="li name">' + item.nameVal
                    + '</div><div class="li next">' + item.nextVal
                    + '</div><div class="li gender">' + item.genderVal
                    + '</div><div class="li phone">' + item.phoneVal
                    + '</div><div class="li email">' + item.emailVal
                    + '</div><div class="li address">' + item.addressVal
                    + '</div><div class="li time">' + item.data
                    + '</div><div class="li status">' + item.statusVal
                    + '</div><div class="li status change" data-value=' + dataVal + ' data-item=' + JSON.stringify(item) + ' data-index=' + (perArr.length - i) + '>' + dataVal
                    + '</div></div>';
            }
        }
        console.log(htmlStr);
        listBox.html(htmlStr);
        alert('属性修改成功');
        $('#mark2').hide();
    })
    console.log()
    // 添加会员
    var btn = $('#btn');
        
    btn.click(function (e) {
        mark.show();
            
    })
}